<template>
    <!-- <div>品牌管理brand (好像是结束了 还可能优化)</div> -->
    <div class="app-container">
        <el-card>
      <div slot="header" class="clearfix">
         <el-button size="mini" type="primary" @click="addbrands">新增</el-button>
      </div>
      <div>
            <el-table v-loading="loading" :data="brandList"  border style="width: 100%">
                <el-table-column fixed type="index" label="序号" width="50"></el-table-column>
                <el-table-column  prop="name" align="center"  label="品牌名称" width="150"></el-table-column>
                <el-table-column  align="center" label="展示状态" width="150">
                    <template slot-scope="scope">
                        <span>是否展示:</span>
                        <el-switch  @change="switchShow(scope.row)" v-model="scope.row.showStatus" :active-value="1" :inactive-value="0"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="logo" width="150">
                     <template slot-scope="scope">
                       <img style="width:80%;height:auto" :src="scope.row.logo" alt="">
                    </template>
                </el-table-column>
                <el-table-column align="center"  label="专区大图" width="150">
                     <template slot-scope="scope">
                       <img style="width:100%;height:auto" :src="scope.row.bigPic" alt="">
                    </template>
                </el-table-column>
                <el-table-column align="center"  prop="brandStory"  label="品牌故事" width="150"></el-table-column>
                <el-table-column align="center"  prop="createTime"  label="创建时间" width="150"></el-table-column>
                <el-table-column align="center"  prop="sort"  label="排序" width="150"></el-table-column>
                <el-table-column  align="center" prop="productCommentCount"  label="产品评论数量" width="150"></el-table-column>
                <el-table-column align="center" prop="productCount"  label="产品数量" width="150"></el-table-column>
                <el-table-column align="center"  label="是否品牌制造商" width="150">
                    <template slot-scope="scope">
                        <div>{{scope.row.factoryStatus==0?"不是":"是"}}</div>
                    </template>
                </el-table-column> 
                <el-table-column fixed="right"  label="操作"  width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="editList(scope.row)">编辑</el-button>
                        <el-button type="text" style="color:red" size="small" @click="removeList(scope.row)" >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
      </div>
      <!-- 这是分页 -->
          <div>
             <el-pagination 
              :current-page="page.start"
              :page-sizes="page.pageSizes"
              :page-size="page.limit" 
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
              @size-change="handleSizeChange"  
              @current-change="handleCurrentChange">
              </el-pagination>
          </div>
    </el-card>
        <AddbrandList ref="addbrandList" @success="getBrand" />
    </div>
</template>
<script>
import brand from "@/api/product/brand";
import AddbrandList from "../components/addbrand"
export default {
    components:{
        AddbrandList
    },
    data(){
        return{
            brandList:[],
            //页码
            page:{
                //开始页
                start: 1,
                //最多几行
                limit: 5,
                //总页数
                total: 0,
                pageSizes:[5, 10, 20, 30],
            },
            loading:false,
        }
    },
    methods:{
        // 获取品牌列表数据
        init(){
            this.loading=true;
            brand.findBrandByPage(this.page.start,this.page.limit).then(res=>{
                console.log(res)
                this.loading=false;
                if(res.success){
                    this.brandList=res.data.rows;
                    this.page.total=res.data.total;
                }else{
                    this.$message.error("获取数据失败")
                }
            })
        },
        //新增
        addbrands(){
           this.$refs.addbrandList.setBrand()
        },
        //接收子组件传过来的值
        getBrand(val){

        },
        //编辑
        editList(row){
            this.$refs.addbrandList.open(row)
        },
        //删除
        removeList(row){
             this.$confirm('是否确认删除该品牌, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    console.log(this.bindList);   
                    brand.delBrand(row.id).then(res=>{
                        console.log(res);
                        if(res.success){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.init();
                        }else{
                            this.$message.error("删除品牌失败")
                        }
                    })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
                });
        },
        //是否展示
        switchShow(e){
            var switchs=e.showStatus==0?1:0;
            brand.switchShowStatus({
                    id: e.id,
                    status: e.showStatus
            }).then(res=>{
                console.log(res);
                if(res.success){
                    this.$message.success("修改状态成功");
                    this.init();
                }else{
                    this.$message.error("修改状态失败");
                    e.showStatus=switchs;
                }
            })
        },
        //每页条数pageSize 改变时会触发
        handleSizeChange(val){
        this.page.limit=val;
        this.init()
        },
        //当前页currentPage 改变时会触发
        handleCurrentChange(val){
        this.page.start=val;
        this.init()
        },
    },
    created(){
        this.init();
    }
}
</script>
<style lang="scss" scoped>
@import "@/styles/myScss";

</style>